<script setup lang="ts">
import { ref, watch } from "vue";
// https://plus-pro-components.com/components/form.html
import "plus-pro-components/es/components/form/style/css";
import { PlusForm } from "plus-pro-components";
import { useBase } from "./utils/base";
import { useEmail } from "./utils/email";

defineOptions({
  name: "AdminGeneralConfig"
});

const spaceSize = ref(20);
const size = ref("default");
const dynamicSize = ref();
const curTagMap = ref({});
let curIndex = ref(0);
const checkTag = ref([
  {
    title: "基础设置",
    checked: true,
    index: 0
  },
  {
    title: "会员配置",
    checked: false,
    index: 1
  }
]);
function onChecked(tag, index) {
  if (size.value === "disabled") return;
  curTagMap.value[index] = Object.assign({
    ...tag,
    checked: !tag.checked
  });
  checkTag.value.map(item => (item.checked = false));
  checkTag.value[index].checked = curTagMap.value[index].checked;
  const { title, checked } = curTagMap.value[index];
  curIndex.value = curTagMap.value[index].index;
  // message(checked ? `已选中${title}` : `取消选中${title}`, {
  //   type: "success"
  // });
}

watch(size, val =>
  val === "disabled"
    ? (dynamicSize.value = "default")
    : (dynamicSize.value = size.value)
);

const {
  state,
  rules,
  columns,
  handleChange,
  handleSubmit,
  handleSubmitError,
  handleReset
} = useBase();

const {
  email_state,
  email_rules,
  email_columns,
  email_handleChange,
  email_handleSubmit,
  email_handleSubmitError,
  email_handleReset,
  email_sendtext
} = useEmail();
</script>

<template>
  <div class="content">
    <div class="tap_btns">
      <el-space wrap :size="spaceSize">
        <el-check-tag
          v-for="(tag, index) in checkTag"
          :key="index"
          :class="[
            'select-none',
            size === 'disabled' && 'tag-disabled',
            tag.checked && 'is-active'
          ]"
          :checked="tag.checked"
          @change="onChecked(tag, index)"
        >
          {{ tag.title }}
        </el-check-tag>
      </el-space>
    </div>
    <div class="forms">
      <PlusForm
        v-if="curIndex === 0"
        v-model="state"
        class="w-[450px] m-auto"
        :columns="columns"
        :rules="rules"
        label-position="right"
      >
        <template #footer="{ handleSubmit, handleReset }">
          <div style="margin: 0 auto">
            <el-button type="primary" @click="handleSubmit">提交</el-button>
            <el-button @click="handleReset">重置</el-button>
          </div>
        </template>
      </PlusForm>
      <PlusForm
        v-if="curIndex === 1"
        v-model="email_state"
        class="w-[450px] m-auto"
        :columns="email_columns"
        :rules="email_rules"
        label-position="right"
      >
        <template
          #footer="{
            handleSubmit: email_handleSubmit,
            handleReset: email_handleReset
          }"
        >
          <div style="margin: 0 auto">
            <el-button type="primary" @click="email_handleSubmit"
              >提交</el-button
            >
            <el-button @click="email_handleReset">重置</el-button>
            <el-button type="warning" @click="email_sendtext"
              >发送测试邮件</el-button
            >
          </div>
        </template>
      </PlusForm>
    </div>
  </div>
</template>
<style scoped lang="scss">
.forms {
  float: left;
  padding: 50px 25px;
}
</style>
